<template>
  <div class="data">
    <div class="gross">
      <div class="gross-data">
        <span class="gross-num">{{ sum }}</span>
        <span class="gross-english">{{ unit }}</span>
      </div>
      <div class="gross-text">总量</div>
    </div>

    <div class="increase">
      <div class="increase-data">
        <span class="increase-num">{{ chain }}%</span>
        <span class="increase-arrows">↑</span>
      </div>
      <div class="increase-text">同比</div>
    </div>

    <div class="decline">
      <div class="decline-data">
        <span class="decline-num">{{ yearOver }}%</span>
        <span class="decline-below-arrow">↓</span>
      </div>
      <div class="decline-text">环比</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    sum: {
      type: Number,
      required: true,
    },
    unit: {
      type: String,
      required: true,
    },
    chain: {
      type: Number,
      required: true,
    },
    yearOver: {
      type: Number,
      required: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.data {
  box-sizing: border-box;
  border-bottom: 1px solid #385793;
  width: 19.792vw;
  margin: auto;
  display: flex;
  justify-content: center;
  // padding-bottom: 1.852vh;
  padding-bottom: 1vh;
  align-items: flex-end;
}

.increase {
  border-left: 1px solid #385793;
  border-right: 1px solid #385793;
  // line-height: 3.111vh;
  flex-shrink: 0;
  width: 33.33%;
}

.gross {
  flex-shrink: 0;
  width: 33.33%;
  margin-top: -0.3vh;
}

.gross-data {
  margin-left: -0.718vw;
  text-align: center;
}

.gross-num {
  font-size: 1.2vw;
  margin-right: 0.5vw;
  // margin-left: -0.5vw;
}

.increase-num {
  margin-left: 1.302vw;
}

.gross-text {
  text-align: center;
}

.increase-text {
  text-align: center;
}

.decline {
  flex-shrink: 0;
  width: 33.33%;
}

.decline-text {
  text-align: center;
  // line-height: 4.111vh;
}

.increase-arrows {
  margin-left: 0.521vw;
  margin-right: 1.146vw;
  position: relative;
  top: -0.5vh;
}

.gross-english {
  // margin-left: 0.521vw;
  // margin-right: 0.781vw;
}

.decline-num {
  margin-left: 1.146vw;
  margin-right: 0.469vw;
}

.decline-below-arrow {
  position: relative;
  top: -0.5vh;
}

.increase-data {
  color: #3af6a4;
}

.decline-data {
  color: #e4c576;
}
</style>
